Tooltip Implementation: Hover and Focus Accessible Information

Tooltips are small, contextual help messages that appear when a user hovers their mouse pointer over or focuses on an element. They can provide additional information, clarify the purpose of an element, or offer hints on how to use a feature. However, tooltips can easily become accessibility nightmares if not implemented correctly. This guide outlines best practices for creating tooltips that are usable by everyone, including users with disabilities.

Why Accessibility Matters for Tooltips

Accessibility isn't just about compliance; it's about creating a better user experience for everyone. When tooltips aren't accessible, it can exclude users who rely on assistive technologies like screen readers, keyboard navigation, or speech input. Consider these scenarios:

• Screen reader users: If a tooltip isn't properly marked up, a screen reader might not announce its presence or content.
• Keyboard users: If a tooltip only appears on hover, keyboard users won't be able to access it.
• Users with motor impairments: Precise mouse movements required for hover interactions can be challenging or impossible.
• Users with cognitive disabilities: A poorly timed or confusing tooltip can create frustration and hinder understanding.

By following accessibility best practices, we can ensure that tooltips enhance rather than hinder the user experience for all.

Key Principles for Accessible Tooltips

The following principles are crucial for creating accessible tooltips:

1. Provide alternative access: Ensure tooltips are accessible via both hover and keyboard focus.
2. Use ARIA attributes: Use ARIA (Accessible Rich Internet Applications) attributes to properly identify and describe tooltips to assistive technologies.
3. Manage focus: Control where focus goes when a tooltip is displayed and hidden.
4. Ensure sufficient contrast: Provide enough color contrast between the tooltip text and background.
5. Allow sufficient time: Give users enough time to read the tooltip content.
6. Make them dismissable: Provide a clear way to dismiss the tooltip.
7. Avoid overuse: Use tooltips sparingly and only when necessary.

Implementation Techniques

1. Using Hover and Focus

The most critical aspect of accessible tooltips is ensuring they are accessible to both mouse and keyboard users. This means the tooltip should appear both on hover and when the element receives focus.

HTML:

            <a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

            

              
                Copy
              
            
          

Explanation:

• aria-describedby: This attribute links the link to the tooltip element using its ID. This tells assistive technologies that the tooltip provides additional information about the link.
• role="tooltip": This ARIA role identifies the element as a tooltip.
• The CSS uses the adjacent sibling selector (+) to show the tooltip when the link is hovered over or focused.

JavaScript (Advanced Control - Optional):

While CSS can handle simple show/hide, JavaScript allows for more robust control, especially when tooltips are dynamically generated or need more complex behavior.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. Using ARIA Attributes

ARIA attributes are essential for providing semantic information to assistive technologies. Here's a breakdown of key attributes:

• aria-describedby: As mentioned earlier, this attribute establishes the relationship between the triggering element and the tooltip element.
• role="tooltip": This attribute explicitly defines the element as a tooltip.
• aria-hidden="true"/aria-hidden="false": Use these to indicate whether the tooltip is currently visible to assistive technologies. When the tooltip is hidden, set aria-hidden="true". When it's visible, set aria-hidden="false". This is particularly important when using JavaScript to control the tooltip's visibility.

Example:

            <button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>
            

              
                Copy
              
            
          

JavaScript (for aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Managing Focus

When a tooltip appears, it generally *should not* steal focus from the triggering element. Focus should remain on the element that triggered the tooltip. This ensures that keyboard users can continue navigating the page without unexpected interruptions.

However, there might be situations where you *want* to move focus to the tooltip, particularly if the tooltip contains interactive elements (e.g., links, buttons). In this case, ensure that:

• The tooltip is visually distinct to indicate it has focus.
• There is a clear way to return focus to the original triggering element (e.g., a close button within the tooltip).

In most cases, avoiding focus management within the tooltip itself is preferred for simplicity and usability.

4. Ensuring Sufficient Contrast

Color contrast is crucial for readability. Ensure that the text color in your tooltips has sufficient contrast against the background color. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

Use online contrast checkers to verify that your color choices meet accessibility standards. Examples of contrast checkers include:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Example (Good Contrast):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Example (Poor Contrast):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Allowing Sufficient Time

Users need enough time to read the tooltip content. Avoid tooltips that disappear too quickly. While there's no magic number, aim for a minimum display time of a few seconds. Also, the tooltip should remain visible as long as the user is hovering over or has focused on the triggering element. If you need to dismiss the tooltip due to other events, provide an indicator that the tooltip will close.

If the tooltip content is lengthy, consider providing a way for the user to manually dismiss the tooltip (e.g., a close button or pressing the Escape key).

6. Making Them Dismissable

While tooltips often disappear automatically when the user moves their mouse away or removes focus, it's good practice to provide a clear way to dismiss them manually, especially for lengthy tooltips or tooltips containing interactive elements.

Methods for Dismissing Tooltips:

• Close button: Include a visually prominent close button within the tooltip.
• Escape key: Allow users to dismiss the tooltip by pressing the Escape key.
• Click outside: Dismiss the tooltip when the user clicks anywhere outside the tooltip and the triggering element. (Use with caution as it can be disruptive).

Example (Close Button):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>
            

              
                Copy
              
            
          

Example (Escape Key):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Replace with your actual hide tooltip function
  }
});

            

              
                Copy
              
            
          

7. Avoiding Overuse

Tooltips should be used sparingly and only when they provide truly helpful information. Overusing tooltips can clutter the interface, distract users, and create a frustrating experience.

Alternatives to Tooltips:

• Clear labels: Use clear and descriptive labels for form fields, buttons, and links.
• Contextual help: Provide help text directly within the interface, near the relevant elements.
• Help documentation: Link to comprehensive help documentation for more complex features.

Advanced Considerations

Dynamic Content

If your tooltip content is dynamically generated (e.g., loaded from an API or updated based on user input), ensure that the aria-describedby attribute and tooltip visibility are updated accordingly. Use JavaScript to manage these updates.

Positioning

Carefully consider the positioning of your tooltips. Avoid placing them in a way that obscures important content or causes layout shifts. Be mindful of different screen sizes and resolutions, and use CSS to ensure that tooltips are always visible within the viewport.

Mobile Devices

Tooltips traditionally rely on hover interactions, which are not available on touch-based devices. For mobile devices, consider using alternative interaction methods, such as:

• Tap: Display the tooltip when the user taps the element.
• Long press: Display the tooltip when the user long-presses the element.
• Show on focus Display when the element receives focus. This can be achieved with JavaScript, checking for touch support (e.g., `('ontouchstart' in window)`) and altering the display behaviour accordingly.

Testing Your Tooltips

Thoroughly test your tooltips to ensure they are accessible to all users. Use a combination of manual testing and automated accessibility testing tools.

Testing Methods:

• Keyboard navigation: Verify that tooltips are accessible using the keyboard.
• Screen reader testing: Use a screen reader to ensure that tooltips are properly announced.
• Color contrast analysis: Use a color contrast checker to verify sufficient contrast.
• Mobile testing: Test tooltips on different mobile devices and screen sizes.
• Automated accessibility testing: Use tools like axe DevTools, WAVE, or Lighthouse to identify potential accessibility issues.

Internationalization (i18n) and Localization (l10n)

When developing tooltips for a global audience, keep internationalization and localization in mind:

• Text direction: Support both left-to-right (LTR) and right-to-left (RTL) text directions. Use CSS logical properties (e.g., `margin-inline-start`, `margin-inline-end`) instead of physical properties (e.g., `margin-left`, `margin-right`) for layout.
• Language-specific translations: Provide translations of tooltip content for different languages.
• Date and time formats: Adapt date and time formats to the user's locale.
• Number formats: Use appropriate number formats for different regions (e.g., decimal separators, thousands separators).

Conclusion

Implementing accessible tooltips requires careful planning and attention to detail. By following the principles and techniques outlined in this guide, you can create tooltips that are usable by everyone, regardless of their abilities. Remember that accessibility is an ongoing process, so continue to test and refine your tooltips to ensure they meet the needs of all your users.

Resources

• ARIA Authoring Practices Guide (APG) - Tooltip
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA